import { Component, OnDestroy } from '@angular/core'
import { Router } from '@angular/router'
import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms'
import { NzMessageService } from 'ng-zorro-antd'
import { _HttpClient } from '@delon/theme'

@Component({
  selector: 'passport-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.less'],
})
export class UserRegisterComponent implements OnDestroy {

  constructor(fb: FormBuilder, private router: Router, public http: _HttpClient, public msg: NzMessageService) {
    this.form = fb.group({
      mail: [null, [Validators.required, Validators.email]],
      password: [null, [Validators.required, Validators.minLength(6), UserRegisterComponent.checkPassword.bind(this)]],
      confirm: [null, [Validators.required, Validators.minLength(6), UserRegisterComponent.passwordEquar]],
      mobilePrefix: ['+86'],
      mobile: [null, [Validators.required, Validators.pattern(/^1\d{10}$/)]],
      captcha: [null, [Validators.required]],
    })
  }

  // #region fields

  get mail() {
    return this.form.controls.mail
  }
  get password() {
    return this.form.controls.password
  }
  get confirm() {
    return this.form.controls.confirm
  }
  get mobile() {
    return this.form.controls.mobile
  }
  get captcha() {
    return this.form.controls.captcha
  }
  form: FormGroup
  error = ''
  type = 0
  visible = false
  status = 'pool'
  progress = 0
  passwordProgressMap = {
    ok: 'success',
    pass: 'normal',
    pool: 'exception',
  }

  // #endregion

  // #region get captcha

  count = 0
  interval$: any

  static checkPassword(control: FormControl) {
    if (!control) return null
    const self: any = this
    self.visible = !!control.value
    if (control.value && control.value.length > 9) {
      self.status = 'ok'
    } else if (control.value && control.value.length > 5) {
      self.status = 'pass'
    } else {
      self.status = 'pool'
    }

    if (self.visible) {
      self.progress = control.value.length * 10 > 100 ? 100 : control.value.length * 10
    }
  }

  static passwordEquar(control: FormControl) {
    if (!control || !control.parent) {
      return null
    }
    if (control.value !== control.parent.get('password')!.value) {
      return { equar: true }
    }
    return null
  }

  getCaptcha() {
    if (this.mobile.invalid) {
      this.mobile.markAsDirty({ onlySelf: true })
      this.mobile.updateValueAndValidity({ onlySelf: true })
      return
    }
    this.count = 59
    this.interval$ = setInterval(() => {
      this.count -= 1
      if (this.count <= 0) clearInterval(this.interval$)
    }, 1000)
  }

  // #endregion

  submit() {
    this.error = ''
    for (const i in this.form.controls) {
      this.form.controls[i].markAsDirty()
      this.form.controls[i].updateValueAndValidity()
    }
    if (this.form.invalid) {
      return
    }

    const data = this.form.value
    this.http.post('/register', data).subscribe(() => {
      this.router.navigateByUrl('/passport/register-result', {
        queryParams: { email: data.mail },
      })
    })
  }

  ngOnDestroy(): void {
    if (this.interval$) clearInterval(this.interval$)
  }
}
